<template>
  <div>
    <div class="title">
      <div class="avatar">
        <img :src="info.mer_avatar" alt="" />
      </div>

      <div class="main-info">
        <div class="company-name">
          {{ info.mer_name }}
          <div class="honor" v-if=" info.mer_name">
            <img src="~/assets/images/honor.png" alt="" />会员企业
          </div>
        </div>
        <div class="classes">
          <div
            class="class"
            v-for="(item, index) in cate"
            :key="index"
            @click="goProduct"
          >
            {{ item.cate_name }}
          </div>
          
        </div>
      </div>

      <div class="status">
        <div class="wrap">
          <div class="item settle">
            <img src="~/assets/images/settle-date.png" alt="" />{{ merchantInfo.createTime || '未入驻' }}
          </div>
          <div class="item certify">
            <img v-if="merchantInfo.packmate === 1" src="~/assets/images/certification.png" alt="已认证" />
            <img v-else src="~/assets/images/not_certified.png" alt="未认证">
            {{ merchantInfo.packmate === 1 ? "已认证" : "未认证" }}
          </div>
          <div class="item level">
            <img src="~/assets/images/diamond.png" alt="" />{{ info.getMerVipGrade && info.getMerVipGrade.title || '普通卖家' }}
          </div>
          <div class="item score">
            <img src="~/assets/images/score-star.png" alt="" />
            综合评分<span class="score-keywords">{{ info.product_score }}</span>/5.0
          </div>
          <div class="btns">
            <m-button width="113" height="36" class="item collect">
              <div
                style="display: flex; align-items: center"
                @click.stop="handleCollection()"
              >
                <img
                  src="~/assets/images/collect-white.png"
                  alt=""
                  style="margin-right: 5px"
                />
                收藏企业
              </div>
            </m-button>
            <m-button width="113" height="36" class="item share-btns">
              <div style="display: flex; align-items: center">
                <img
                  src="~/assets/images/share-white.png"
                  alt=""
                  style="margin-right: 5px"
                />
                分享企业
              </div>
              <div class="share-icon" @click.stop>
                <img
                  class="qq"
                  src="/images/qq.png"
                  @click="share('qq', item)"
                  alt=""
                />
                <img
                  class="wechat"
                  src="/images/wechat1.png"
                  alt=""
                />
                <img
                  class="email"
                  src="/images/email1.png"
                  @click="dialogemail = true"
                  alt=""
                />
                <div class="meet" ref="qrCodeUrl"></div>
              </div>
            </m-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 邮箱弹窗-模态框 -->
    <email-dialog v-model="dialogemail" :title="title">
      <m-form
        ref="form1"
        :model="emailData"
        style="width: 439px"
        :rules="rules"
      >
        <m-form-item label="邮箱" prop="email">
          <m-input
            v-model="emailData.email"
            type="email"
            placeholder="请输入邀请企业邮箱地址"
          />
        </m-form-item>
        <m-form-item label="内容" prop="content">
          <m-input
            v-model="emailData.content"
            placeholder="请输入邀请内容详情"
            type="textarea"
          />
        </m-form-item>
        <m-form-item>
          <div style="display: flex; justify-content: center">
            <m-button width="235" @click="handleEmail">确定</m-button>
          </div>
        </m-form-item>
      </m-form>
    </email-dialog>
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton"
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import emailDialog from "@/components/emailDialog.vue"
import QRCode from "qrcodejs2"
import {
  getMerchantCate,
  getCollection,
  getEmailSet
} from "@/request/api"

export default {
  name: "Title",
  components: {
    MButton,
    emailDialog,
    MForm,
    MFormItem,
    MInput
  },
  props: {
    id: "",
    info: {},
    merchantInfo:{
      type: Object,
      default:{}
    }
  },
  data() {
    return {
      companyId: "",
      isPackmate: "",
      cate: [],
      dialogemail: false,
      title: "分享邮箱",
      emailData: {
        email: "",
        content: ""
      },
      rules: {
        email: [
          {
            require: true,
            message: "邮箱不能为空",
            trigger: blur,
          }
        ],
        content: [
          {
            require: true,
            message: "内容不能为空",
            trigger: blur,
          }
        ]
      }
    }
  },
  created() {
    this.getInfo();
    this.$nextTick(() => {
      this.creatQrCode()
    })
  },
  methods: {
    onCopy(e) {
      this.$toastVant.success("分享链接复制成功")
    },
    onError(e) {
      this.$message.error("抱歉，复制失败！")
    },
    goProduct() { this.$router.push({ path: "/company-home/product/" + this.id })},
    async getInfo() {
      const res = await getMerchantCate(this.id);
      try{
        this.cate = res.data;
      }catch(err) {
        this.$message.error(err.message)
      }
    },
    // 收藏产品
    handleCollection() {
      const params = {
        type_id: this.id,
        type: 10
      }
      getCollection(params).then((res) => {
        if (res.status === 200) {
          this.$message.success(res.message)
        }else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 生成微信二维码
    creatQrCode() {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: window.location.href,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    // 分享
    share(type) {
      if (type === "qq") {
        window.open(
          "http://connect.qq.com/widget/shareqq/index.html?url=" +
            document.location.href +
            `?sharesource=qzone&title=${this.info.mer_name}&pics=${this.info.mer_avatar}&summary=${this.info.content}`
        )
      }
    },
    handleEmail() {
      this.$refs.form1.$refs.mForm.validate( valid => {
        if(valid) {
          getEmailSet(this.emailData).then(res => {
            if(res.status === 200) {
              this.$messgae.success(res.message || '分享成功！')
              setTimeout(() => {
                this.dialogemail = false
              },200)
            }
          }).catch(err => {
            this.$message.fail(err.message)
          })
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.title {
  width: 1200px;
  margin: 0 auto;
  padding: 15px 0;
  height: 155px;
  border-bottom: solid 1px #eaeaea;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .avatar {
    width: 234px;
    height: 100px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .main-info {
    width: 50%;
    height: 100%;
    display: flex;
    border-right: solid 1px #eaeaea;
    flex-direction: column;
    // padding: 0 50px;
    margin-right: 70px;
    box-sizing: border-box;

    .company-name {
      font-size: 22px;
      margin-bottom: 20px;
      margin-top: 10px;
      padding-left: 10px;
      position: relative;
      display: flex;

      .honor {
        font-size: 12px;
        display: flex;
        align-items: center;
        color: $theme-color-1;
        font-weight: bold;
        display: inline-flex;
        margin-left: 10px;

        img {
          margin-right: 5px;
        }
      }
    }

    .classes {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      margin-left: 10px;

      .class {
        width: 90px;
        height: 40px;
        border: solid 1px #eaeaea;
        line-height: 40px;
        text-align: center;
        margin-right: 20px;
        color: #999;
        margin-top: 10px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }

  .status {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: flex-start;

    .wrap {
      .item {
        width: 45%;
        height: 25px;
        display: inline-flex;
        margin-right: 10px;
        margin-bottom: 10px;
        align-items: center;

        img {
          margin-right: 5px;
        }
      }

      .btns {
        margin-top: 10px;
        display: flex;
        align-items: center;

        /deep/ .el-button {
          border-radius: 20px !important;
        }
        .share-btns {
          position: relative;
          &:hover .share-icon {
            display: block;
          }
          .share-icon {
            width: 100px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            top: 25px;
            left: 15px;
            display: none;
            .meet {
              position: absolute;
              top: 30px;
              left: 0;
              z-index: 100;
            }
            .wechat:hover .meet {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>
